import React, { useState } from "react";
import { useNavigate } from 'react-router-dom'
import '../KFR_css/an_ks.css'
import { LeftOutline, ClockCircleOutline,RightOutline,SearchOutline  } from 'antd-mobile-icons'

export default function An_ks() {
    const navigate = useNavigate();
    const [an_ks,setan_ks]=useState([
        {
            id:1,
            name:'北京协和医院',
            juli:'0.5km',
            address:'北京市东城区帅府园一号',
            img:'KFR_imgs/1.webp'
        },
        {
            id:2,
            name:'北京大学第一医院',
            juli:'11.5km',
            address:'北京市西城区西什库大街8号',
            img:'KFR_imgs/2.webp'
        },
        {
            id:3,
            name:'中国人民解放军总医院',
            juli:'22.3km',
            address:'北京市海淀区复兴路29号',
            img:'KFR_imgs/3.webp'
        },
        {
            id:4,
            name:'北京大学第三医院',
            juli:'22.3km',
            address:'机场院区，第二门',
            img:'KFR_imgs/4.webp'
        },
        {
            id:5,
            name:'首都医科大学附属北京同仁医院',
            juli:'22.3km',
            address:'东区',
            img:'KFR_imgs/1.webp'
        },
        {
            id:6,
            name:'首都医科院附属北京天坛医院',
            juli:'23.0km',
            address:'北京市丰台区南四环西路119号',
            img:'KFR_imgs/2.webp'
        },
    ])
    return (
        <div className="an_ks">
            <div className="an_ks_1">
                <div className="an_ks_1_1">
                    <div className="an_ks_1_1_1">
                        <LeftOutline fontSize={18} />
                    </div>
                    <div className="an_ks_1_1_2">医院列表</div>
                </div>
            </div>

            <div className="an_ks_2">
                <div className="an_ks_2_1">
                    <div className="an_ks_2_1_1">
                        <div className="an_ks_2_1_1_1">
                            <div className="an_ks_2_1_1_1_1">
                            <SearchOutline fontSize={16}/>
                            </div>
                            <div className="an_ks_2_1_1_1_2">皮肤科</div>
                        </div>
                    </div>
                </div>
                <div className="an_ks_2_2">
                    <div className="an_ks_2_2_1">
                        <ClockCircleOutline fontSize={16}/>
                    </div>
                    <div className="an_ks_2_2_2">我的挂号记录</div>
                    <div className="an_ks_2_2_3">查看
                    <RightOutline />
                    </div>
                </div>
            </div>

            <div className="an_ks_3">
                <div className="an_ks_3_1">
                    <div className="an_ks_3_1_1">
                    <svg t="1739522313465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8832" width="200" height="200"><path d="M512 96C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z m-9 208c22.2 0 40 18 40 40s-18 40-40 40-40-18-40-40 17.8-40 40-40z m73 400H448v-16h32V448h-32v-16h96v256h32v16z" p-id="8833" fill="#707070"></path></svg>
                    </div>
                    <div className="an_ks_3_1_2">
                        根据距离由近及远显示医院信息
                    </div>
                </div>
            </div>

            <div className="an_ks_4">
                <ul>
                    {
                        an_ks.map((ele,index)=>{
                            return <li key={ele.id}>
                            <div className="an_ks_4_1">
                                <div className="an_ks_4_1_1">
                                    <div className="an_ks_4_1_1_1">
                                        <div className="an_ks_4_1_1_1_1">
                                            <img src={ele.img}/>
                                        </div>
                                    </div>
                                    <div className="an_ks_4_1_1_2">
                                        <div className="an_ks_4_1_1_2_1">
                                            <div className="an_ks_4_1_1_2_1_1">三甲</div>
                                            <div className="an_ks_4_1_1_2_1_2">{ele.name}</div>
                                        </div>
                                        <div className="an_ks_4_1_1_2_2">
                                            {ele.juli} | {ele.address}
                                        </div>
                                    </div>
                                </div>
                                <div className="an_ks_4_1_2">
                                    <div className="an_ks_4_1_2_1">皮肤科</div>
                                    <div className="an_ks_4_1_2_2">立即挂号</div>
                                </div>
                            </div>
                        </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}